<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wechat</title>
    <link rel="stylesheet" href="/static/user/css/reset.css">
    <link rel="stylesheet" href="/static/user/css/common.css">
    <link rel="stylesheet" href="/static/user/css/iconfont.css">
    <script src="/static/user/js/jquery-3.4.1.js"></script>
    <style>
        /* 聊天列表头部 */
        img{
            display: block;
            width: 100%;
            height: 100%;
        }
        .chatting{
            width: 500px;
            border-radius: 5px;
            box-sizing: border-box;
        }
        .chatting-header{
            width: 100%;
            padding: 5px;
            height: 75px;
            background-color: #ee9e9e;
            box-sizing: border-box;
            position: relative;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .chatting-header-item{
            display: inline-block;
        }
        .chatting-header-logo{
            width: 65px;
            height: 65px;
            border-radius: 100%;
            overflow: hidden;
            margin-right: 15px;
        }
        .chatting-header-name{
            position: absolute;
            left: 85px;
        }
        .admin-name{
            margin-top: 5px;
            font-weight: bold;
            font-size: 16px;
        }
        /* 聊天列表中部 */
        .chatting-mess-list{
            width: 100%;
            height: 375px;
            overflow-x: auto;
        }
        .chatting-mess-list::-webkit-scrollbar{
            width: 2px;
        }
        .chatting-mess-list::-webkit-scrollbar-thumb{
            width: 2px;
            border-radius: 5px;
            background-color: #ee9e9e;
        }

        .chatting-mess-list .current{
            background-color: rgb(198,198,197);
        }
        .chatting-mess-list-item{
            width: 100%;
            height: 75px;
            padding: 10px;
            box-sizing: border-box;
            background-color: rgb(233, 232, 232);
            position: relative;
        }
        .chatting-mess-list-item-logo{
            width: 55px;
            height: 55px;
            display: inline-block;
            position: relative;
        }
        .mess-num{
            font-size: 12px;
            color: #ffffff;
            text-align: center;
            display: block;
            height: 16px;
            line-height: 16px;
            width: 16px;
            border-radius: 100%;
            position: absolute;
            top: -3px;
            right: -5px;
            background-color: #ff0000;
        }
        .chatting-mess-list-item-right-side{
            width: 75%;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            position: absolute;
            left: 75px;
            margin-top: 2px;
        }
        .name-date-left-side{
            color: #333333;
            font-size: 16px;
            width: 27%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .name-date-right-side{
            font-size: 13px;
            color: #cccccc;
        }
        .message-info{
            margin-top: 10px;
            font-size: 13px;
            width: 100%;
            height: 25px;
            line-height: 25px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .message-info-detail{
            width: 80%;
            height: 25px;
            line-height: 25px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .icon-xiaoxi{
            font-size: 20px;
            cursor: pointer;
        }
        .icon-xiaoxi:hover{
            color: #e26363;
        }
        /* 聊天列表底部 */
        .chatting-footer{
            height: 35px;
            width: 100%;
            background-color: #ee9e9e;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="chatting">
        <div class="chatting-header">
            <div class="chatting-header-item chatting-header-logo">
                <img src="/static/user/images/4.jpg" alt="">
            </div>
            <div class="chatting-header-item chatting-header-name">
                <div class="admin-name">东莞乡巴佬</div>
            </div>
        </div>
        <ul class="chatting-mess-list">
            <li class="chatting-mess-list-item">
                <div class="chatting-mess-list-item-logo">
                    <img src="/static/user/images/5.jpg" alt="">
                    <span class="mess-num">20</span>
                </div>
                <div class="chatting-mess-list-item-right-side">
                    <div class="name-date clearfix">
                        <div class="name-date-left-side left clearfix">
                            莞工维C鲜橙
                        </div>
                        <div class="name-date-right-side right clearfix">
                            20/09/24
                        </div>
                    </div>
                    <div class="message-info clearfix">
                        <div class="message-info-detail left clearfix">今天鲜橙非常甜！真的哟！欢迎购买，嘿嘿嘿~</div>
                        <a class="huifuxinxi right clearfix">
                            <i class="iconfont icon-xiaoxi"></i>
                        </a>
                    </div>

                </div>
            </li>
        
        </ul>
        <div class="chatting-footer"></div>
    </div>
</body>
<script>
    var formid={$formid};
    var ws =new WebSocket("ws://127.0.0.1:8282");
    ws.onmessage=function (e) {
        var message=eval("("+e.data+")");
        switch(message.type){
            case 'init':
                var bind='{"type":"bind","formid":"'+formid+'"}';
                ws.send(bind);
                list();
                return;
            case 'text':
                $('#content').html("");
                list();
                return;

        }
    };
    function list() {
        $.ajax({
            url:"/chat/chat/get_list",
            type:"POST",
            data:{
                'formid':formid,
            },
            success:function (e) {
                console.log(e);
                $.each(e,function (index,content) {
                    //$('.chatting-mess-list').append('<div style="position: relative"><img src="'+content.head_url+'" style="height: 80px;width: 80px;" alt=""><div style="position: absolute;width: 15px;height: 15px;border-radius: 100%;background: red;left: 80px;top: 0px;color: #fff;font-size: 10px;text-align: center">'+content.countNoread+'</div><div style="position: absolute;left: 90px;top: 50px">'+content.lastmessage.content+'</div><div style="position: absolute;left: 230px;top: 10px">123</div></div>');
                $('.chatting-mess-list').append(`<li class="chatting-mess-list-item">
                <div class="chatting-mess-list-item-logo">
                    <img src="/static/user/images/5.jpg" alt="">
                    <span class="mess-num">`+content.countNoread+`</span>
                </div>
                <div class="chatting-mess-list-item-right-side">
                    <div class="name-date clearfix">
                        <div class="name-date-left-side left clearfix">
                            `+content.username+`
                        </div>
                        <div class="name-date-right-side right clearfix">
                             `+content.date+`
                        </div>
                    </div>
                    <div class="message-info clearfix">
                        <div class="message-info-detail left clearfix">`+content.lastmessage+`</div>
                        <a class="huifuxinxi right clearfix">
                            <i class="iconfont icon-xiaoxi"></i>
                        </a>
                    </div>

                </div>
            </li>`)
                })


            }
        });
    }
</script>

</html>